<template>
  <div>
    <Dialog
      class="dialog"
      width="70%"
      :appendToBody="true"
      :dialogVisible.sync="dialogVisible"
      title="量化分级评分详情"
      @onconfirm="onconfirm"
      @oncancel="oncancel"
    >
      <el-form
        label-width="120px"
        ref="ruleForm"
        :rules="rules"
        :model="sendData"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                maxlength="50"
                v-model="sendData.name"
                placeholder="请输入姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="mobile">
              <el-input
                maxlength="11"
                v-model="sendData.mobile"
                placeholder="请输入联系方式"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-radio-group v-model="sendData.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执法证件编号" prop="lawenforcementid">
              <el-input
                maxlength="50"
                v-model="sendData.lawenforcementid"
                placeholder="请输入执法证件编号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input
                maxlength="50"
                type="password"
                v-model="sendData.password"
                placeholder="请输入密码"
                clearable
                @change="changeInput"
              ></el-input>
              <div class="intensity">
                <span class="psdText">密码强度</span>
                <span
                  class="line"
                  :class="[level.includes('low') ? 'low' : '']"
                ></span>
                <span
                  class="line"
                  :class="[level.includes('middle') ? 'middle' : '']"
                ></span>
                <span
                  class="line"
                  :class="[level.includes('high') ? 'high' : '']"
                ></span>

                <span v-if="level.includes('high')">高</span>
                <span v-else-if="level.includes('middle')">中</span>
                <span v-else-if="level.includes('low')">低</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                maxlength="50"
                type="password"
                v-model="sendData.confirmPassword"
                placeholder="请输入确认密码"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
import { modifySysSupervisor, findSysSupervisorById } from "@/api/modules/login";
export default {
  // props:[],
  // 页面加载
  created() {
    this.findSysSupervisorById();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    let checkPhone = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      unitList: [],
      dialogVisible: true,
      sendData: {
        gender: 1,
        id: JSON.parse(sessionStorage.getItem("userInfo")).userInfo.id,
        lawenforcementid: "",
        mobile: "",
        name: "",
        password: "",
        confirmPassword:""
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],

        confirmPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
        ],

        mobile: [
          {
            type: "number",
            validator: checkPhone,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        lawenforcementid: [
          { required: true, message: "请输入执法证件编号", trigger: "blur" },
        ],
      },
      level: [],
    };
  },
  // 方法
  methods: {
    onconfirm() {
            this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          if (this.sendData.confirmPassword !== this.sendData.password) {
            return this.$error("两次密码不一致");
          }
          if (!this.level.includes("high") && !this.level.includes("middle")) {
            return this.$error("密码强度低");
          }
      
            let { msg } = await modifySysSupervisor(this.sendData);
            this.$success(msg);
            this.dialogVisible = false;
            this.$emit("oncancel");
                this.$store.dispatch("LogOut").then(() => {
            location.reload(); // In order to re-instantiate the vue-router object to avoid bugs
          });
        }
      });
    },
    oncancel() {
      this.dialogVisible = false;
      this.$emit("oncancel");
    },

    changeInput(value) {
      this.level = [];
      // checksum is a number
      const regex1 = /^\d+$/;
      // check letter
      const regex2 = /^[A-Za-z]+$/;
      // check mark
      const regex3 =
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#￥%...&* ()——\-+={}|《》?: ""【】,;'',.,]+$/;
      if (regex1.test(value)) {
        this.level.push("low");
      } else if (regex2.test(value)) {
        this.level.push("low");
      } else if (regex3.test(value)) {
        this.level.push("low");
      } else if (/^[A-Za-z\d]+$/.test(value)) {
        this.level.push("low");
        this.level.push("middle");
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#￥%...&* ()——\-+={}|《》?: ""【】,;'',.,\d]+$/.test(
          value
        )
      ) {
        this.level.push("low");
        this.level.push("middle");
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#￥%...&* ()——\-+={}|《》?: ""【】,;'',., A-Za-z]+$/.test(
          value
        )
      ) {
        this.level.push("low");
        this.level.push("middle");
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#￥%...&* ()——\-+={}|《》?: ""【】,;'',., A-Za-z\d]+$/.test(
          value
        )
      ) {
        this.level.push("low");
        this.level.push("middle");
        this.level.push("high");
      }
    },
    async findSysSupervisorById() {
      let { data } = await findSysSupervisorById({
        params: {
          id: JSON.parse(sessionStorage.getItem("userInfo")).userInfo.id,
        },
      });
        this.sendData.gender=data.gender
        this.sendData.lawenforcementid=data.lawenforcementid
        this.sendData.mobile=data.mobile
        this.sendData.name=data.name
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.intensity {
  display: flex;
  align-items: center;
  .psdText {
    font-size: 14px;
    margin-right: 10px;
  }
  .line {
    display: inline-block;
    width: 48px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 3px;
    margin-right: 8px;
    &.low {
      background: #f4664a;
    }
    &.middle {
      background: #ffb700;
    }
    &.high {
      background: #2cbb79;
    }
  }
  .level {
    margin: 0 16px 0 8px;
  }
}
</style>